/**
 * @version      BOSSCMS-Free
 * @trademark    BOSSCMS
 * @copyright    Copyright © by BOSSCMS-Free (https://www.bosscms.net/) 保留所有权利
 * @license      https://gitee.com/Greenpeas/BOSSCMS/license/ 和 https://www.bosscms.net/freelicense/
 * @link         https://www.bosscms.net/
 * @author       温州软界网络技术有限公司
**/
header.topnav{height:58px; background:#fff; white-space:nowrap; box-shadow:0 1px 0 #f8f8f8;
position:absolute; z-index:2; top:0; left:208px; right:0; transition:left .3s;}
header.topnav:after{display:block; content:''; clear:both;}
header.topnav>.menu{display:none; float:left; line-height:58px; cursor:pointer;}
header.topnav>.menu:after{float:left; content:'菜单栏'; font-weight:normal; padding-left:6px; color:#686868;}
header.topnav>.menu i{float:left; line-height:inherit; font-size:22px;}
header.topnav>.menu i.fa-dedent{display:none;}
header.topnav>.menu i.fa-indent{display:block;}
header.topnav>.menu.on{color:#2271b1;}
header.topnav>.menu.on i.fa-dedent{display:block;}
header.topnav>.menu.on i.fa-indent{display:none;}

header.topnav>.snav{float:left; line-height:58px; padding-left:16px;}
header.topnav>.snav a{float:left; line-height:inherit; padding-right:6px; font-size:15px;}
header.topnav>.snav b{float:left; font-weight:normal; padding-left:10px;}
header.topnav>.snav i{float:left; line-height:inherit; padding-left:10px; color:#a8a8a8;}


header.topnav>.wrap{float:right;}
header.topnav>.wrap>ul{margin-right:16px;}
header.topnav>.wrap>ul:after{display:block; content:''; clear:both;}
header.topnav>.wrap>ul>li{float:left; position:relative;}
header.topnav>.wrap>ul>li:before{position:absolute; top:22px; bottom:22px; right:0; width:1px; background:#d8d8d8; content:'';}
header.topnav>.wrap>ul>li.free:before{display:none;}
header.topnav>.wrap>ul>li:last-child:before{display:none;}
header.topnav>.wrap>ul>li>a{display:block; line-height:58px; padding:0 26px; position:relative;}
header.topnav>.wrap>ul>li>a[news]:before{position:absolute; width:6px; height:6px; border-radius:6px; line-height:0; background:red; content:''; font-size:0; right:18px; top:18px; transition:.3s;}
header.topnav>.wrap>ul>li>a[news]:hover:before{width:16px; height:16px; border-radius:16px; line-height:16px; text-align:center; color:#fff; content:attr(news); font-size:12px; right:12px; top:12px;}
header.topnav>.wrap>ul>li>a[news="0"]:before{display:none;}
header.topnav>.wrap>ul>li em{margin-right:4px; color:#686868;}
header.topnav>.wrap>ul>li a:hover em{color:#2271b1;}
header.topnav>.wrap>ul>li>ul{position:absolute; display:none; top:100%; background:#fff; padding:8px 0; border-radius:3px; box-shadow:0 0 6px rgba(0,0,0,.12);}
header.topnav>.wrap>ul>li:hover>ul{display:block;}
header.topnav>.wrap>ul>li>ul>li{display:block;}
header.topnav>.wrap>ul>li>ul>li>a{display:block; padding:8px 18px 8px 16px; line-height:26px;}
header.topnav>.wrap>ul>li>ul>li:hover>a{background:#f8f8f8;}
header.topnav>.wrap>ul>li>ul>li.on>a{color:#2271b1;}
header.topnav>.wrap>ul>li img.lang{vertical-align:middle;margin-right:6px;height:18px;}
header.topnav>.wrap>ul>li>span.user{padding:0 46px 0 26px; position:relative; display:block; text-align:right;}
header.topnav>.wrap>ul>li>span.user img{width:34px; height:34px; border-radius:50%; position:absolute; right:0; top:12px; object-fit:cover;}
header.topnav>.wrap>ul>li>span.user b{display:block; line-height:58px; font-weight:normal;}
header.topnav em{width:18px; text-align:center; line-height:inherit;}

header.topnav>.wrap>ul>li>strong{display:block; height:26px; margin:17px 14px 0 0;}
header.topnav>.wrap>ul>li.free>strong{margin-right:0;}
header.topnav>.wrap>ul>li>strong>a{display:block; line-height:22px; position:relative; background:#fff; padding:2px; border-radius:4px; overflow:hidden;}
header.topnav>.wrap>ul>li>strong>a:before{position:absolute; z-index:1; top:0; left:6px; content:''; width:18px; height:22px; background:#fff; border-radius:4px; transform:rotate(45deg);}
header.topnav>.wrap>ul>li>strong>a>i{color:#2271b1; position:absolute; z-index:2; left:2px; top:2px; font-size:20px;}
header.topnav>.wrap>ul>li>strong>a>b{color:#fff; display:block; margin-left:16px; font-weight:normal; background:#2271b1; padding:0 8px 0 12px; border-radius:5px;}

header.topnav>.wrap .free{height:58px;}
header.topnav>.wrap .buy{position:absolute; display:none; top:100%; right:-10px; background:#fff; width:330px; border-radius:3px; box-shadow:0 0 12px rgba(0,0,0,0.12); padding:12px;}
header.topnav>.wrap .buy.on,
header.topnav>.wrap .free:hover .buy{display:block;}
header.topnav>.wrap .buy:before{position:absolute; width:12px; height:12px; background:#fff; right:50px; top:-5px; border-radius:0 0 0 50%; transform:rotate(-45deg); box-shadow:2px -2px 2px rgba(0,0,0,0.06); content:''; z-index:8;}
header.topnav>.wrap .buy>dl{border-radius:3px;}
header.topnav>.wrap .buy>dl>dt{padding:12px 16px; border-bottom:2px dashed #fff; background:#f1f9ff; }
header.topnav>.wrap .buy>dl>dt:after{display:block; content:''; clear:both;}
header.topnav>.wrap .buy>dl>dt>u{float:left; text-decoration:none; line-height:30px;}
header.topnav>.wrap .buy>dl>dt>a{float:right;}
header.topnav>.wrap .buy>dl>dd{padding:6px 8px; background:#f1f9ff; }
header.topnav>.wrap .buy>dl>dd:after{display:block; content:''; clear:both;}
header.topnav>.wrap .buy>dl>dd>span{display:block; width:50%; float:left; padding:6px 4px; white-space:nowrap; overflow:hidden;}
header.topnav>.wrap .buy>dl>dd>span>i{width:20px; text-align:center; color:#2271b1;}
header.topnav>.wrap .buy>dl>dd>span>u{text-decoration:none; color:#484848;}
header.topnav>.wrap .buy>dl>dd>b{padding:6px 4px; font-weight:normal; display:block; white-space:pre-wrap;}
header.topnav>.wrap .buy>dl>dd>b a{color:#2271b1;}
header.topnav>.wrap .buy>dl>dd>b a:hover{text-decoration:underline;}
header.topnav>.wrap .buy>dl>dd>b+b{padding-top:3px;}
header.topnav>.wrap .buy>dl>dd>b>i{float:left; margin-bottom:1px;}
header.topnav>.wrap .buy>p{padding:8px 16px; margin-top:8px;}
header.topnav>.wrap .buy>p+p{border-top:1px dashed #f4f4f4; margin-top:0;}
header.topnav>.wrap .buy .update>u>i{margin-right:6px; animation:turn 1s linear infinite;}
header.topnav>.wrap .buy .update>a.green{background:#20a53a;}
header.topnav>.wrap .buy .update>a.green:hover{opacity:0.68;}
@keyframes turn{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}

.service{position:fixed; top:0; right:0; bottom:0; left:0; z-index:88888; cursor:pointer; display:none; background:rgba(0,0,0,0.58); user-select:none; pointer-events:none;
-webkit-box-pack:center; -moz-box-pack:center; -ms-flex-pack:center; -o-box-pack:center; box-pack:center; 
-webkit-box-align:center; -moz-box-align:center; -ms-flex-align:center; -o-box-align:center; box-align:center;}
a[service]:hover .service{display:-webkit-box; display:-moz-box; display:-ms-flexbox; display:-o-box; display:box; }
.service>span{display:block; z-index:888; position:relative; background:#fff; padding:10px; border-radius:3px;}
.service>span>img{display:block; max-width:100%; width:268px;}
.service>span>b{display:block; margin-top:10px; font-size:16px; text-align:center; color:#1d2327;}


section.category{position:absolute; z-index:8; width:208px; height:100%; overflow-x:hidden; overflow-y:auto; background:#1d2327; color:#fff; transition:width .3s;}
section.category a{color:#fff;}
section.category>.logo{background:#1d2327; font-size:0; transition:.3s; padding:0 22px 0 16px; height:58px; line-height:58px; position:absolute; left:0; top:12px; right:0; z-index:8;}
section.category>.logo>a{display:inline-block;}
section.category>.logo>a>img{display:inline-block; -webkit-filter:grayscale(1) brightness(8); filter:grayscale(1) brightness(8); vertical-align:middle; width:8888px !important; height:8888px !important; max-width:8888px !important; max-height:8888px !important;}
section.category>.logo>a>img.img{display:inline-block;}
section.category>.logo>a>img.ico{display:none;}
section.category>.logo>a>img[src^="../system/admin/common/img/logo.png"],
section.category>.logo>a>img[src^="../system/admin/common/img/logo_ico.png"]{max-width:100% !important; max-height:100% !important; width:auto !important; height:auto !important;}
section.category>.nav{height:100%; padding-top:68px; position:relative; z-index:6; color:#484848;}
section.category>.nav a{color:#fff;}
section.category>.nav>ul{display:block;}
section.category>.nav a.shrink,
section.category>.nav>ul>li{display:block; transition:.3s; position:relative; line-height:22px; margin-top:8px; overflow:hidden;}
section.category>.nav>ul>li[bosscms]{display:block;}
section.category>.nav>ul>li>a{position:relative; display:block; z-index:8; cursor:pointer;}
section.category>.nav a.shrink:after,
section.category>.nav>ul>li>a:after{display:block; content:''; clear:both;}
section.category>.nav a.shrink>em,
section.category>.nav>ul>li>a>em{width:22px; float:left; line-height:52px; margin-left:16px; text-align:center;}
section.category>.nav a.shrink>font,
section.category>.nav>ul>li>a>font{display:block; line-height:22px; padding:15px 0 15px 45px; white-space:nowrap;}
section.category>.nav>ul>li>a>i{position:absolute; right:16px; top:0; line-height:52px; color:#ccc;}
section.category>.nav>ul>li.on>a>i{transform:rotate(180deg);}
section.category>.nav>ul>li>a>b{position:fixed; z-index:9; bottom:100%; left:-10%; background:#f1737b; color:#fff; border-radius:50px; border-bottom-left-radius:0; font-size:12px; 
font-weight:normal; line-height:22px; text-align:center; padding:0 8px;}
section.category>.nav>ul>li>a>b>span{display:none;}
section.category>.nav>ul>li:hover>a>b>span{display:inline;}
section.category>.nav>ul>li>ul{padding:0; display:none;}
section.category>.nav>ul>li.on>ul{display:block;}
section.category>.nav>ul>li>ul>li{padding:0; margin:4px 0; position:relative; transition:.2s; overflow:hidden;}
section.category>.nav a.shrink:hover,
section.category>.nav>ul>li>ul>li:hover,
section.category>.nav>ul>li>ul>li.on{background:#2271b1;}
section.category>.nav>ul>li>ul>li>a{display:block; white-space:nowrap; padding:10px 0 10px 52px;}
section.category>.nav>ul>li>ul>li>a>u{position:relative;}
section.category>.nav>ul>li>ul>li>a>u:after{position:absolute; background:red; content:''; border-radius:50%; font-size:12px; width:6px; height:6px; top:-2px; left:4px; color:#fff; transition:.3s;}
section.category>.nav>ul>li>ul>li>a:hover>u:after{top:-8px; content:attr(data); line-height:18px; text-align:center; width:18px; height:18px;}
section.content{position:relative; z-index:1; width:100%; height:100%; display:block; padding:58px 0 0 208px; background:#f8f8f8; transition:padding-left .3s;}
section.content iframe{border:none; overflow:auto; width:100%; height:100%; display:block;}

.snav .fa-refresh{cursor:pointer;}

 
@media(min-width:1200px){
header.topnav.icon{left:48px;}
section.category.icon{width:48px;}
section.category.icon>.logo{padding:0 8px;}
section.category.icon>.logo>a>img.img{display:none;}
section.category.icon>.logo>a>img.ico{display:inline-block;}
section.category.icon>.nav>ul>li{padding:0; overflow:visible;}
section.category.icon>.nav a.shrink,
section.category.icon>.nav>ul>li>a{text-align:center;}
section.category.icon>.nav a.shrink>font,
section.category.icon>.nav>ul>li>a>font,
section.category.icon>.nav>ul>li>a>i{display:none;}
section.category.icon>.nav>ul>li>ul{position:fixed; display:none; border-radius:0 3px 3px 0; overflow:hidden; left:48px; top:0; background:#1d2327;}
section.category.icon>.nav>ul>li>ul>li{margin:0; overflow:visible;}
section.category.icon>.nav>ul>li>ul>li.on:before{display:none;}
section.category.icon>.nav>ul>li>ul>li>a{padding:10px 26px;}
section.category.icon>.nav a.shrink>em,
section.category.icon>.nav>ul>li>a>em{float:none; margin-left:0; font-size:16px;}
section.category.icon>.nav a.shrink>em:before{content:"\f138";}
section.category.icon>.nav>ul>li:hover{background:#2271b1;}
section.category.icon>.nav>ul>li:hover>ul{display:block;}
section.category.icon>.nav>ul>li:hover>ul>li.on,
section.category.icon>.nav>ul>li:hover>ul>li:hover{background:#2271b1;}
section.content.icon{padding-left:48px;}
}


@media(max-width:1500px){
header.topnav{left:188px;}
section.category{width:188px;}
section.content{padding-left:188px;}
}
@media(max-width:1400px){
header.topnav>.column>ul>li{margin-left:6px;}
header.topnav>.column>ul>li>a{padding:0 10px;}
header.topnav>.wrap>ul>li>a{padding:0 18px;}
}
@media(max-width:1199px){
header.topnav{left:0;}
header.topnav>.menu{display:block; margin-left:68px;}
header.topnav>.column{display:none;}
section.content{padding-left:0;}
section.category{width:0; background:none; overflow:visible;}
section.category>.nav{overflow:auto; width:188px; height:auto; padding:0; position:absolute; top:58px; bottom:0; z-index:88888; background:#1d2327; transform:translateX(-100%); transition:.3s;}
section.category>.nav.active{transform:translateX(0);}
section.category>.nav>ul{display:block; height:auto;}
section.category>.btn{display:none;}
section.category>.logo{width:48px; top:0; padding:0 8px;}
section.category>.logo>a>img.img{display:none;}
section.category>.logo>a>img.ico{display:inline-block;}
header.topnav>.snav a{padding-right:3px;}
header.topnav>.snav b,
header.topnav>.snav i{padding-left:5px;}
section.category>.nav a.shrink{display:none;}
}
@media(max-width:767px){
header.topnav{height:48px;}
header.topnav>.menu{line-height:48px; margin-left:62px;}
header.topnav>.menu:after{padding-left:4px; content:'菜单';}
header.topnav>.menu i{font-size:18px;}

section.content{padding-top:48px;}
section.category>.nav{top:48px;}
section.category>.nav>ul>li>a>font{padding:6px 0 6px 45px}
section.category>.nav>ul>li>ul>li>a{padding:6px 0 6px 55px}
section.category>.nav>ul>li>a>em,
section.category>.nav>ul>li>a>i{line-height:34px;}
section.category>.logo{padding:0 8px; width:48px; height:48px; line-height:48px;}
section.category>.logo>a>img.img{display:none;}
section.category>.logo>a>img.ico{display:inline-block;}
header.topnav>.snav{display:none;}
header.topnav>.wrap .free{display:none;}
header.topnav>.wrap>ul{margin-right:8px;}
header.topnav>.wrap>ul>li>a{padding:0 14px; line-height:48px;}
header.topnav>.wrap>ul>li:first-child{display:none;}
header.topnav>.wrap>ul>li:before{top:18px; bottom:18px;}
header.topnav>.wrap>ul>li>ul{right:0; padding:4px 0;}
header.topnav>.wrap>ul>li>ul>li>a{padding:4px 18px 4px 12px;}
header.topnav>.wrap>ul>li>span.user{padding:0; width:38px; height:48px;}
header.topnav>.wrap>ul>li>span.user b,
header.topnav>.wrap>ul>li>span.user p{display:none;}
header.topnav>.wrap>ul>li>span.user img{width:22px; height:22px; top:14px; right:2px;}
}